<template>

  <el-card style="margin: 20px 0" lang="zh-CN">
    <!--  标签页-->
    <!-- 表格操作 -->
    <div style="float: left; margin: 0 0 15px 0;">
      <el-popconfirm title="确定全部删除吗？" @confirm="deleteCategorys()">
        <el-button type="danger" size="small" icon="el-icon-delete" :disabled="multipleSelection.length == 0"
                   slot="reference">
          批量删除
        </el-button>
      </el-popconfirm>

      <el-button size="small" type="primary" @click="open" style="margin-left: 10px">
        <i style="padding-right: 5px" class="el-icon-plus"></i>新增
      </el-button>

    </div>
    <!--      表格-->

    <el-table stripe :data="allData"
              tooltip-effect="dark"
              style="width: 100%;
              padding: 0"
              @selection-change="handleSelectionChange"
              :header-cell-class-name="headerBg"
              border
              :header-cell-style="{ textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }"
              v-loading="loading">
      <el-table-column type="selection" width="40">
      </el-table-column>

      <el-table-column prop="name" label="名称" width="400">
      </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间">
      </el-table-column>
      <el-table-column label="操作" width="150px">
        <template slot-scope="scope">
          <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row)">
            <el-button size="small" type="danger" slot="reference" style="margin-left: 3px">
              删 除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>


    <!--    分页-->
    <div style="padding: 10px 0; float: right">
      <el-pagination :page-size="10" layout="total, prev, pager, next, jumper" :total=length
                     @current-change="handleCurrentChange" :current-page="currentPage">
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'all',
      /*批量处理的数据*/
      multipleSelection: [],
      /*表格第一行*/
      headerBg: "headerBg",
      /*第一次请求所有数据*/
      allData: [],
      /*搜索栏中的昵称*/
      searchName: '',
      // currentPage:1,
      /*显示的数据*/
      currentDate: [],
      /*当前页数*/
      currentPage: 1,
      /*当前的数据暂时*/
      currentDateTemp: [],
      searchPrams: {
        pageNum: 1,
        pageSize: 10,
        categoryId: '',
      },

      categoryId: '',

      length: 0,

      category: '',

      loading: false,
    }
  },

  created() {
    this.list();
    this.enterSearch();
  },


  methods: {
    open() {
      this.$prompt('请输入分类', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        this.axios.get("/category/insert-category?name=" + value).then(({data}) => {
          if (data.state == 20000) {
            this.$message.success(data.message);
            location.reload();//上传成功后自动刷新页面，刚上传的头像显示出来
          } else {
            this.$message.error(data.message);
          }

        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },


    handleDelete(id) {
      console.log(id)
      this.axios.get("/category/delete-by-keys/" + id.id).then(({data}) => {
        if (data.state == 20000) {
          this.$message.success(data.message);
          location.reload();//上传成功后自动刷新页面，刚上传的头像显示出来
        } else {
          this.$message.error(data.message);
        }

      })

    },

    list() {
      console.log("this.searchPrams", this.searchPrams);
      this.loading = true;

      this.axios.get("/category/get-list-by-example", {
        params: this.searchPrams
      }).then(({data}) => {
        if (data.state == 20000) {
          this.allData = data.data.list;
          this.length = data.data.totalCount;

        } else {
          this.$message.error(data.message);
        }
        this.loading = false;
      });


    },


    /*当前页变动时候触发的事件*/
    handleCurrentChange(val) {
      /*val就是页号*/
      this.currentPage = val;
      this.searchPrams.pageNum = val;
      this.list();
    },


    /*获取单独的评论id*/
    deleteCategory(obj) {
      console.log("删除的id:{}", obj)
      this.deleteCategorys(obj.id);
    },


    /*删除*/
    deleteCategorys(ids) {
      let temp = this.allData.length;

      if (temp == 1 && this.searchPrams.pageNum - 1 > 0) {
        this.searchPrams.pageNum--;
      } else if (temp == this.multipleSelection.length && this.searchPrams.pageNum - 1 > 0) {
        this.searchPrams.pageNum--;
      }
      console.log("id:{}", ids);
      this.axios.get("/category/delete-by-keys/" + this.multipleSelection
      ).then(({data}) => {
        if (data.state == 20000) {
          this.$message({
            message: '删除成功！',
            type: 'success'
          });
          this.list();
        } else {
          this.$message.error(data.message);
        }

      });
    },

    /*获取批量删除的评论id*/
    handleSelectionChange(val) {
      this.multipleSelection = [];
      val.forEach((item) => {
        this.multipleSelection.push(item.id);
      });
    },


    /*根据文章查询评论列表*/
    searchByName() {

      this.searchName = this.searchName.trim();
      if (this.searchName != '') {
        this.searchPrams.name = this.searchName;
        this.list();
        this.searchPrams.name = '';
        this.searchName = '';
      } else {
        this.list();
      }

    },

    //回车搜索
    enterSearch() {
      document.onkeydown = e => {
        //13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
        if (e.keyCode === 13) {
          //回车后执行搜索方法
          this.searchByName();
        }
      }
    }


  }
  ,


}
</script>

<style>
.headerBg {
  background: #eee !important;
}

.el-table .el-table__cell {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
}
</style>
